<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>日本語の勉強</title>

		<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css">
		<script type="text/javascript" charset="UTF-8" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/user/other/jquery-labelauty.css">
		
		<style type="text/css">
		#box{
			width: 100%;
			margin:0 auto;
		}
		
		#box  .carousel-inner > .item > img {
		    display: block;
		    width:100%;
		    height:918px;
		}
		</style>
	</head>

	<body>
		<jsp:include page="/WEB-INF/jsp/user/top.jsp"></jsp:include>
		<div style="height: 50px;"></div>
		<div id="box">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			  <!-- Indicators -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			  </ol>
			
			  <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			    <div class="item active">
			      <img src="${pageContext.request.contextPath}/img/laopo1.jpg" alt="...">
			    </div>
			    <div class="item">
			      <img src="${pageContext.request.contextPath}/img/laopo2.jpg" alt="...">
			    </div>
			    <div class="item">
			      <img src="${pageContext.request.contextPath}/img/laopo3.jpg" alt="...">
			    </div>
			  </div>
			
			  <!-- Controls -->
			  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
		<script type="text/javascript">
			var height = $("#box").css("height");
			$("img").css("height",height);
		</script>
</html>